<template>
    <ProTable
        ref="proTableRef"
        :loading="table.isRefresh"
        controllerUrl="region"
        :data="table.data"
        :page="table.page"
        :columns="columns"
        :headerActionTypes="['add', 'delete', 'batchDelete', 'search', 'dynamicQuery']"
        :columnActionTypes="['edit', 'delete']"
        :queryFormItems="queryFormItems"
        :dynamicQuery="table.dynamicQuery"
        @onTableAction="onTableAction"
    >
        <template #form>
            <RegionForm ref="formRef" @onTableAction="onTableAction"></RegionForm>
        </template>
    </ProTable>
</template>

<script setup lang="tsx">
import { RegionType } from '@/api/system/region/type'
import { QueryFormItem } from '@/types/queryform'
import { TagProps } from 'element-plus'

const { table, proTableRef, formRef, onTableAction } = useTable({ api: new ProTableApi('region') })
const columns = reactive<Array<TableColumnType<RegionType>>>([
    {
        type: 'selection',
        align: 'center',
    },

    {
        prop: 'name',
        label: '名称',
        align: 'center',
    },
    {
        prop: 'code',
        label: '编码',
        align: 'center',
    },
    {
        prop: 'type',
        label: '类型',
        align: 'center',
        component: (scope: any) => {
            let typeName = ''
            let tagType: TagProps['type'] = 'primary'
            switch (scope.row.type) {
                case 1:
                    typeName = '省份/直辖市/特别行政区'
                    tagType = 'primary'
                    break
                case 2:
                    typeName = '城市'
                    tagType = 'success'
                    break
                case 3:
                    typeName = '县/区'
                    tagType = 'warning'
                    break
                case 4:
                    typeName = '镇/乡/街道'
                    tagType = 'danger'
                    break
                case 5:
                    typeName = '村/社区'
                    tagType = 'info'
                    break
                default:
                    break
            }
            return <el-tag type={tagType}>{typeName}</el-tag>
        },
    },
    {
        prop: 'description',
        label: '描述',
        align: 'center',
    },
])
const queryFormItems = reactive<Array<QueryFormItem<RegionType>>>([
    {
        type: 'number',
        label: 'ID',
        name: 'id',
        placeholder: 'ID',
    },
    {
        label: '名称',
        name: 'name',
        placeholder: '模糊查询',
    },
    {
        label: '编码',
        name: 'code',
        placeholder: '模糊查询',
    },
    {
        type: 'select',
        label: '类型',
        name: 'type',
        options: (): SelectOptions[] => {
            const regionType: SelectOptions[] = [
                { label: '省份/直辖市/特别行政区', value: 1 },
                { label: '城市', value: 2 },
                { label: '县/区', value: 3 },
                { label: '镇/乡/街道', value: 4 },
                { label: '村/社区', value: 5 },
            ]
            return regionType
        },
    },
    {
        type: 'select',
        label: '排序字段',
        sort: 'Sort',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            columns.forEach((item) => {
                if (item.prop && item.label) {
                    options.push({ label: item.label, value: item.prop })
                }
            })
            return options
        },
    },
    {
        type: 'boole',
        label: '顺序',
        sort: 'Order',
        options: (): SelectOptions[] => [
            { label: '顺序', value: true },
            { label: '倒序', value: false },
        ],
    },
])
</script>

<style lang="scss" scoped></style>
